<template>
  <div class="home-head">
    <div id="nav-head">
      <div class="left" @click="toCate">
        <van-icon name="fenlei" class-prefix="icon" size="22"></van-icon>
        <div class="left-text">分类</div>
      </div>
      <div class="center">
        <van-search type="text" placeholder="满58包邮！输入关键字搜索" background="#409EFF" shape="round" disabled @click="toSearch"></van-search>
      </div>
      <div class="right">
        <van-icon name="denglu" class-prefix="icon" size="22"></van-icon>
        <div class="right-text" @click="toLogin">登录</div>
      </div>
    </div>
    <ul id="hot-text">
      <li class="title">热搜：</li>
      <li>汇仁肾宝</li>
      <li>高血压</li>
      <li>祛痘</li>
      <li>祛湿</li>
      <li>补气血</li>
      <li>治肾亏</li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'HomeHead',
  methods: {
    // 点击搜索框进入搜索页，将事件处理发送给父组件
    toSearch () {
      this.$emit('toSearch')
    },
    // 跳转到登录页
    toLogin () {
      this.$emit('toLogin')
    },
    // 跳转到分类页
    toCate () {
      this.$router.push('/cate')
    }
  }
}
</script>

<style lang="scss" scoped>
.icon {
  font-size: 22px;
  color: #fff;
}
.text {
  color: #fff;
}
.home-head{
  display: flex;
  flex-direction: column;
  background-color: #409EFF;
}
#nav-head {
  background-color: #409EFF;
  position: fixed;
  z-index: 9;
  width: 100%;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
.left,.right {
  background-color: #409EFF;
  flex: 1.5;
  text-align: center;
  color: #fff;
}
.left-text,.right-text{
  font-size: 0.4rem;
}
.center{
  flex: 7
}
#hot-text {
  padding-top: 1.8rem;
  display: flex;
  color: #fff;
  justify-content: space-evenly;
}
#hot-text .title {
  font-size: 12px;
  padding: 0.0667rem 0.1rem;
  margin: 0.0667rem 0.1333rem;
}
#hot-text li:not(.title) {
  font-size: 12px;
  padding: 0.0667rem 0.1rem;
  margin: 0.0667rem 0.1333rem;
  border-radius: 25px;
  background-color: rgba($color: #fff, $alpha: 0.2);
}
</style>
